<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.img-cont{
        width:1000px;
        height:570px;
        border:2px solid #317ef3;
        margin:50px auto;
      }


      .img-cont>div{
        width:300px;
        height:260px;
        border:1px solid #777;
        float:left;
        margin:20px 0 0 20px;
      }


      .img-cont>div>div{
        width:300px;
        height:220px;
        border:1px solid red;
      }


      .img-cont>div>a{
        width:60px;
        height:30px;
        border-radius:4px;
        line-height: 30px;
        text-align: center;
        color:#fff;
        display: block;
        background: #317ef3;
        margin:5px 0 0 0px;
        cursor: pointer;
      }


      .hide{
        display: none !important;
      }
	</style>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
    <div class="img-cont">
    	
    </div>
</body>
<script src='js/jquery-3.1.0.min.js'></script>
<script type="text/javascript">
	var id='1';
	function PreviewImage(imgFile){
		var pattern=/(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if(!pattern.test(imgFile.value)){
			alert("系统只支持jpg/jpeg/png/gif/bmp格式的照片！");
			imgFile.focus();
		}
		else{
			var path;
			id+=1;
			$(".img-cont").append("<div><div id='"+id+"'><img src='' /></div><a class='hide delete-btn'>删除</a></div>");
			if(document.all)
			{
				imgFile.select();
				path=document.selection.createRange().text;
				document.getElementById(id).innerHTML="";
				document.getElementById(id).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enable='true',sizingMethod='scale',src=\""+path+"\")";//使用滤镜效果
			}
			else
			{
				path=URL.createObjectURL(imgFile.files[0]);
				document.getElementById(id).innerHTML="<img src='"+path+"' width='' height=''>";
			}
		}
	}
	$(".img-cont").off("mouseenter",'div').on("mouseenter",'div',function(){
		var that=this;
		var dom=$(that).children('a');
		dom.removeClass('hide');
		dom.off('click');
		dom.on('click',function(){
			dom.parent().remove();
		});	}).off('mouseleave','div').on("mouseleave",'div',function(){
		var that=this;
		$(that).children('a').addClass("hide");
	})
</script>
</html>